<template>
  <view class="category">
    <!-- 搜索组件 -->
    <navsearch></navsearch>
    <view class="main">
      <view class="menu_left">
        <view
          :class="['item', activeIndex === index ? 'active' : '']"
          v-for="(item, index) in categoryList"
          :key="item.cat_id"
          @click="handelCate(index)"
          >{{ item.cat_name }}</view
        >
      </view>
      <scroll-view scroll-y :scroll-top="scrollTop" class="content_reight">
        <view class="content" v-for="item in goodsList" :key="item.cat_id">
          <view class="title"
            ><text>/</text><text>{{ item.cat_name }}</text> <text>/</text></view
          >
          <view class="cover_list">
            <view
              class="item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <navigator :url="`/pages/goods_list/index?id=${item2.cat_id}`">
                <image mode="widthFix" :src="item2.cat_icon"></image>
                <view class="name">{{ item2.cat_name }}</view>
              </navigator>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import navsearch from "@/components/navsearch.vue";
let allDatas = [];
export default {
  data() {
    return {
      // categorys: [],
      // 左侧菜单数据
      categoryList: [],
      // 右侧商品数据
      goodsList: [],
      activeIndex: 0,
      // 右侧滚动条默认高度
      scrollTop: 0,
    };
  },
  components: {
    navsearch,
  },
  methods: {
    handelCate(index) {
      this.activeIndex = index;
      this.goodsList = allDatas[index].children;
      this.scrollTop = Math.floor() / 1000;
    },
    // 封装数据请求
    getCategoryList() {
      uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/categories",
        })
        .then((res) => {
          allDatas = res[1].data.message;
          wx.hideLoading();

          // 将数据保存到本地存储中去
          wx.setStorageSync("categorys", {
            time: Date.now(),
            list: allDatas,
          });
          this.categoryList = allDatas.map((item) => {
            return { cat_name: item.cat_name, cat_id: item.cat_id };
          });
          this.goodsList = allDatas[0].children;
        });
    },
  },
  onLoad() {
    wx.showLoading({
      title: "数据加载中",
      mask: true,
    });
    const categorys = wx.getStorageSync("categorys") || null;
    if (categorys) {
      // 有值 判断数据有没有过期，自定义时间五分钟
      if (Date.now() - categorys.time > 60 * 1000) {
        this.getCategoryList();
      } else {
        allDatas = categorys.list;
        this.categoryList = allDatas.map((item) => {
          return { cat_name: item.cat_name, cat_id: item.cat_id };
        });
        this.goodsList = allDatas[0].children;
      }
    } else {
      this.getCategoryList();
    }
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  display: flex;
  overflow: hidden;
  .menu_left {
    width: 182rpx;
    background-color: #f3f3f3;
    overflow: auto;
    text-align: center;
    .item {
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .content_reight {
    flex: 1;
    .content {
      .title {
        margin-top: 8rpx;
        display: flex;
        height: 40rpx;
        justify-content: center;
        align-items: center;
        text:nth-child(2) {
          margin: 10rpx;
          color: #333;
        }
      }
    }
    .cover_list {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      .item {
        width: 33.3%;
        padding: 30rpx;
      }
    }
  }
  .active {
    color: $theme-color;
    border-left: 2px $theme-color solid;
  }
}
</style>
